[jQuery] scrollLeft() method, 스크롤 위치 좌우 이동하기

자바스크립트에서 제이쿼리을 사용하는 경우 스크롤의 좌우 위치를 이동하는 방법입니다. 어떻게 하면 좌우로 스크롤이 이동할 수 있는지 아래에서 알아봅니다.

# 제이쿼리 스크롤 좌우 이동하기, scrollLeft()

제이쿼리는 스크롤 관련 메소드를 제공합니다. 그 중에서 좌우 이동 방법으로 scrollLeft() 메소드를 사용할 수 있습니다. 아래는 간단한 문법입니다.

$(element).scrollLeft(value)

선택 가능한 값은 좌측을 기준으로 몇 픽셀에 위치할 것인지 value를 입력하면 됩니다. 만약 value가 없는 경우 현재의 스크롤 값을 가져와 출력하게됩니다. 현재 좌우 스크롤바 값을 구하는데도 사용할 수 있습니다.

그럼 간단한 예제를 만들어보겠습니다.

! scrollLeft() 예제보기

먼저 스크롤이 가능한 영역을 하나 만들어봅니다.

이제 만들어진 영역 아래에 버튼을 만들고 버튼을 클릭하면 100의 값 만큼 스크롤을 이동해보겠습니다.

! 예제 코드 동작해보기

이제 위에 있는 코드를 실제로 만들고 동작해봅니다. 아래에서 버튼을 클릭하고 스크롤이 이동하는지 확인해보세요.

이제 버튼을 클릭하면 좌측으로 100만큼 이동할 것입니다.

위 예제코드를 잠깐 살펴볼까요? 나누어 알아보면 다음과 같습니다.

• 스크롤 가능한 영역을 만들기 위해 엘리먼트에 overflow-x: scroll을 추가함
• 클릭 이벤트 moveScrollLeft()를 등록하고 버튼을 클릭시 호출하도록 만듦
• 현재 스크롤바 위치를 가져오고 여기에 100을 더함
  

여기까지 스크롤 좌우 이동 버튼 방법을 알아보았습니다.

! 우측이 아닌 좌측으로 이동하는 방법은?

만약 좌측으로 이동하려면? 이때는 값이 +가 아닌 -값을 추가하면 됩니다. 예를들어 위 코드는 +100이 아니라 -100을 주게되면 좌측으로 100만큼 이동하게되겠죠.